<template>
    <div class="heal-guidance-program">
          <div class="other-panel">
            <div class="today-targets current-period">
              <div class="row">
                <a href="/#/implementationPersons" class="item main-item">
                  <div class="act-img-box">
                    <img
                      style="width: 70px; height: 70px"
                      src="../../../assets/img/actrun.png"
                      alt=""
                    />
                  </div>
                  <div class="act-con">
                    <span class="status">执行中人数</span>
                    <span class="distince">{{act.executing}}/{{act.all}}</span>
                  </div>
                </a>
                <a href="/#/todayPunchClock" class="item main-item">
                  <div class="act-img-box">
                    <img
                      style="width: 70px; height: 70px"
                      src="../../../assets/img/actrun.png"
                      alt=""
                    />
                  </div>
                  <div class="act-con">
                    <span class="status">当日打卡人数</span>
                    <span class="distince">{{act.checkIn}}/{{act.all}}</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="other-panel">
            <div class="tit">本周情况</div>
            <div class="dob-chart-box">
              <div class="left">
                <!-- 运动完成率 -->
                <div class="tit">运动完成率</div>
                <div
                  id="actFrequencyCompleteRate"
                  style="width: 100%; height: 100%"
                ></div>
              </div>
              <div class="right">
                <!-- 运动时间完成率 -->
                <div class="tit">运动时间完成率</div>
                <div
                  id="actDurationCompleteRateChart"
                  style="width: 100%; height: 100%"
                ></div>
              </div>
            </div>
          </div>
          <div class="single-chart-box">
            <div class="tit">运动项目占比</div>
            <div
              id="actFrequencyChart"
              style="width: 100%; height: 405px"
            ></div>
          </div>
          <div class="bot-chart-box">
            <div class="left">
              <div
                id="actProportionChart"
                style="width: 100%; height: 405px"
              ></div>
            </div>
            <div class="right">
              <div class="tit">
                <div class="tit-text">运动强度报名</div>
                <div class="sort-box">
                  <a class="active">正序</a>
                  <a>倒序</a>
                </div>
              </div>
              <div class="rank-list">
                <div class="item">
                  <span class="rank-num">1<i class="unit">st</i></span>
                  <span class="class-name">三（5）班</span>
                  <span class="time">完成率：100%</span>
                </div>
                <div class="item">
                  <span class="rank-num">2<i class="unit">st</i></span>
                  <span class="class-name">三（8）班</span>
                  <span class="time">完成率：98%</span>
                </div>
                <div class="item">
                  <span class="rank-num">3<i class="unit">st</i></span>
                  <span class="class-name">四（2）班</span>
                  <span class="time">完成率：98%</span>
                </div>
                <div class="item">
                  <span class="rank-num">4<i class="unit">st</i></span>
                  <span class="class-name">五（1）班</span>
                  <span class="time">完成率：98%</span>
                </div>
                <div class="item">
                  <span class="rank-num">5<i class="unit">st</i></span>
                  <span class="class-name">三（2）班</span>
                  <span class="time">完成率：98%</span>
                </div>
              </div>
            </div>
          </div>
    </div>
</template>


<script>
import * as echarts from "_echarts@5.2.2@echarts";

import { clearLoginInfo, initQueryParams } from "@/utils";
export default {
  data() {
    return {
      actFrequencyChart: null,
      actProportionChart: null,
      actFrequencyCompleteRate: null,
      actDurationCompleteRateChart: null,
      queryParams: initQueryParams(),
      pageData: {
        totalCount: 0,
        list: [],
        extData: {},
      },
      act: {
        executing: 0,
        checkIn: 0,
        all: 0
      },
      dataListLoading: false,
      btnLoading: false,
      pageLoading: false,
      updatePassowrdVisible: false
    };
  },
  mounted() {
    let that = this;

    window.addEventListener("scroll", this.onScroll);
    this.$nextTick(() => {
      that.loadActFrequencyChart();
      that.initActProportionChart();
      that.loadActCountInfo();
      that.loadActFrequencyAndActDurationCompleteRateChartDate();
      that.loadActProportionChart();
    });
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientHeight", val);
      },
    },
    documentClientWidth: {
      get() {
        return this.$store.state.common.documentClientWidth;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientWidth", val);
      },
    },
    userId: {
      get() {
        return this.$store.state.user.id;
      },
      set(val) {
        this.$store.commit("user/updateId", val);
      },
    },
    userTel: {
      get() {
        return this.$store.state.user.tel;
      },
      set(val) {
        this.$store.commit("user/updateTel", val);
      },
    },
    userMobile: {
      get() {
        return this.$store.state.user.mobile;
      },
      set(val) {
        this.$store.commit("user/updateMobile", val);
      },
    },
    userDeptId: {
      get() {
        return this.$store.state.user.deptId;
      },
      set(val) {
        this.$store.commit("user/updateDeptId", val);
      },
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
      set(val) {
        this.$store.commit("user/updateName", val);
      },
    },
    userDeptName: {
      get() {
        return this.$store.state.user.deptName;
      },
      set(val) {
        this.$store.commit("user/updateDeptName", val);
      },
    },
    userType: {
      get() {
        return this.$store.state.user.userType;
      },
      set(val) {
        this.$store.commit("user/updateUserType", val);
      },
    },
  },
  methods: {
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl("/sys/user/info"),
        method: "get",
        params: this.$http.requestParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId;
          this.userName = data.user.userName;
          this.userTel = data.user.tel;
          this.userMobile = data.user.mobile;
          this.userDeptId = data.user.deptId;
          this.userDeptName = data.user.deptName;
          this.userType = data.user.userType;
        }
      });
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$refs.updatePassowrd.init();
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.requestUrl("/sys/logout"),
            method: "post",
            data: this.$http.requestData(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo();
              this.$router.push({ name: "login" });
            }
          });
        })
        .catch(() => {});
    },
    loadActCountInfo() {
      this.$http({
        url: this.$http.requestUrl("/sport/portal/implement"),
        method: "post",
        data: this.$http.requestData(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.act.executing = data.dataList.sportPeople;
          this.act.checkIn = data.dataList.checkInPeople;
          this.act.all = data.dataList.countPeople;
        }
      });
    },
    loadActFrequencyAndActDurationCompleteRateChartDate() {
      this.$http({
        url: this.$http.requestUrl("/sport/portal/timesScore"),
        method: "post",
        data: this.$http.requestData(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.initActFrequencyCompleteRateChart(data);
          this.initActDurationCompleteRateChart(data);
        }
      });
    },
    initActFrequencyCompleteRateChart(v) {
      let completeRate = Number(v.sportTimesScore * 100 ).toFixed(1)+ "%";
      let completeVal = Number(v.sportTimesScore * 1.8 * 100).toFixed(1);
      let _actFrequencyCompleteRate = echarts.init(
        document.getElementById("actFrequencyCompleteRate")
      );
      let data = {
        运动强度: 120,
        运动频率: 150,
        运动时长: 90,
      };
      let option = {
        title:[
          {
          text: "完成率",
          x: "43%",
          y: "55%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        {
          text: completeRate,
          x: "43%",
          y: "35%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 40,
          }
        }
        ],
        legend: {
          show: false,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function (params, b) {
            return (
              params + "\n\n" + (data[params] / 180).toFixed(2) * 100 + "%"
            );
          },
          data: [
            { name: "运动强度" },
            { name: "运动频率" },
            { name: "运动时长" },
          ],
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name: "运动强度",
            endAngle: 0,
            center: ["50%", "60%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#B6D6F4"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: completeVal,
              },
            ],
          }
        ],
      };

      _actFrequencyCompleteRate.setOption(option);

      window.addEventListener("resize", () => {
        _actFrequencyCompleteRate.resize();
      });
    },
    initActDurationCompleteRateChart(v) {
      let completeRate = Number(v.sportDurationScore * 100 ).toFixed(1)+ "%";
      let completeVal = Number(v.sportDurationScore * 1.8 * 100).toFixed(1);
      let _actDurationCompleteRateChart = echarts.init(
        document.getElementById("actDurationCompleteRateChart")
      );
      let data = {
        运动强度: 120,
        运动频率: 150,
        运动时长: 90,
      };
      let option = {
        title: [{
          text: "完成率",
          x: "43%",
          y: "55%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        {
          text: completeRate,
          x: "43%",
          y: "35%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 40,
          }
        }],
        legend: {
          show: false,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function (params, b) {
            return (
              params + "\n\n" + (data[params] / 180).toFixed(2) * 100 + "%"
            );
          },
          data: [
            { name: "运动强度" },
            { name: "运动频率" },
            { name: "运动时长" },
          ],
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name: "运动强度",
            endAngle: 0,
            center: ["50%", "60%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#ADE3DB"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: completeVal,
              },
            ],
          }
        ],
      };

      _actDurationCompleteRateChart.setOption(option);

      window.addEventListener("resize", () => {
        _actDurationCompleteRateChart.resize();
      });
    },
    loadActProportionChart() {
      this.$http({
        url: this.$http.requestUrl("/sport/portal/sportCode/score"),
        method: "post",
        data: this.$http.requestData(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.initActProportionChart(data.dataList);
        }
      });
    },
    initActProportionChart(v) {
      this.actProportionChart = echarts.init(
        document.getElementById("actFrequencyChart")
      );
      const backgroundColor = '#101736';
      const color = ['#4DBDAE', '#4493E5', '#F3AF5C', '#FCD871']; //2个以上的series就需要用到color数组
      const title = {
          show: false,
          text: '运动项目占比',
          textStyle: {
              color: '#fff',
              fontSize: 16,
          },
          padding: 0,
          top: 35,
          left: 40,
      };
      const legend = {
          show: true,
          //data，就是取得每个series里面的name属性。
          orient: 'horizontal',
          icon: 'roundRect', //图例形状
          padding: 0,
          top: 10,
          right: 40,
          itemWidth: 14, //小圆点宽度
          itemHeight: 14, // 小圆点高度
          itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
              fontSize: 14,
              color: '#00E4FF',
          },
      };
      const tooltip = {
          show: true,
          axisPointer: {
              type: 'shadow'
          }
      };

      let ldata = [];
      let originDataM = {};

      function fillArray(arr, length, fillData) {
        for(var i = 0; i < length; i++) {
          arr.push(fillData);
        }
        return arr;
      }

      let maxSportCount = 0;
      for(var grade in v) {
        ldata.push(grade + "年级");
        maxSportCount++;

        var item = v[grade];
        if(item) {
          var sum = 0;
          for(var i in item) {
              sum += item[i].total;
          }
          for(var i in item) {
              item[i].total = Number(item[i].total / sum * 100).toFixed(2);
          }
        }
      }

      let gradeCount = 0;
      for(var grade in v) {
        var item = v[grade];
        if(item) {
          for(var i in item) {
            var vals = originDataM[item[i].sportCode];
            if(vals) {
              vals.data[gradeCount] = item[i].total;
            } else {
              var arr = fillArray([], maxSportCount, 0);
              arr[gradeCount] = item[i].total;
              originDataM[item[i].sportCode] = {name: item[i].sportCode, data: arr};
            }
          }
          gradeCount++;
        }
      }

      const originData = [];
      for(var i in originDataM) {
        var item = originDataM[i];
        item.data = item.data.reverse();
        originData.push(item);
      }

      // const originData = [
      //     { name: '波比跳', data: [15, 8, 25, 18, 9, 13].reverse() },
      //     { name: '前后跳', data: [15, 8, 25, 20, 9, 13].reverse() },
      //     { name: '俯卧撑', data: [15, 8, 25, 50, 9, 13].reverse() },
      //     { name: '俯卧起坐', data: [15, 8, 25, 10, 9, 13].reverse() }
      // ];
      const commonSeriesFn = (index) => ({
          type: 'bar',
          barWidth: '40%', //柱条的宽度，不设时自适应。
          stack: 'total',
          emphasis: {
              focus: 'series',
              itemStyle: {
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 8,
                  shadowOffsetX:2,
                  shadowOffsetY:2
              },
          },
          showBackground: false, //柱子是否带有背景，默认是没有的
          backgroundStyle: {
              //只有showBackground=true，设置backgroundStyle才会有效果
              color: 'rgba(180, 180, 180, .2)', //
          },
      });
      const series = originData.map((item, index) => ({
          ...item,
          ...commonSeriesFn(index),
      }));

      // let ldata=['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];
      let option = {
        
          color,
          title,
          legend,
          tooltip,
          grid: {
              left:0,
                right:20,
                bottom:0,
                containLabel: true
          },
          xAxis: {
              type: 'value',
              axisLine: {
                  show: false, //显示X轴
              },
              axisTick: {
                  show: false, //不显示小的刻度线
              },
              splitLine: {
                  show: true, //不显示横向分割线
              },
              axisLabel:{
                margin:10,
                textStyle:{
                  color:'#C1CECB',
                  fontSize:14
                },
                formatter:function(value){
                  return value+'%';
                }
              }
          },
          yAxis: {
              type: 'category',
              axisLine: {
                  show: false, //显示Y轴
              },
              axisTick: {
                  show: false, //不显示小的刻度线
              },
              splitLine: {
                  show: false, //不显示竖向分割线
              },
              data:ldata.reverse(),
              axisLabel:{
                margin:41,
                textStyle:{
                  color:'#B1BDBA',
                  left:-20,
                  fontSize:14
                }
              }
          },

          series,
      };
      //图表自动轮播高亮显示函数 myChart直接用
      const animation = (delay = 3000) => {
          let currentIndex = -1;
          const length = option.series[0].data.length;
          setInterval(() => {
              currentIndex = (currentIndex + 1) % length;
              // 高亮当前图形
              myChart.dispatchAction({
                  type: 'highlight',
                  seriesIndex: 0,

                  dataIndex: currentIndex,
              });
              // 显示 tooltip
              myChart.dispatchAction({
                  type: 'showTip',

                  seriesIndex: 0,
                  dataIndex: currentIndex,
              });
          }, delay);
      };
      // animation(10000)

      this.actProportionChart.setOption(option);
    },
    loadActFrequencyChart() {
      this.$http({
        url: this.$http.requestUrl("/sport/portal/times"),
        method: "post",
        data: this.$http.requestData(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.initActFrequencyChart(data.dataList);
        }
      });
    },
    initActFrequencyChart(v) {
      this.actFrequencyChart = echarts.init(
        document.getElementById("actProportionChart")
      );

      let manGrade = v.man;
      let womanGrade = v.woman;
      let grade = manGrade.concat(womanGrade);
      let list = [];
      let gradeList = [];
      let manList = [];
      let womanList = [];

      let gradeMap = {};

      for(var gradeId in manGrade) {
        manList.push(manGrade[gradeId].sportTimesScore);
        list.push(manGrade[gradeId].gradeId);
      }
      for(var gradeId in womanGrade) {
        womanList.push(womanGrade[gradeId].sportTimesScore);
        list.push(womanGrade[gradeId].gradeId);
      }
      console.log(list);
      for(var gradeId in list) {
        var gradeV = list[gradeId] + "年级";
        if(!gradeMap[gradeV]) {
          gradeList.push(gradeV);
          gradeMap[gradeV] = 1;
        }
      }

      let option = {
        title:{
           show: true,
            text: '各项年级男女运动频次',
            textStyle: {
                color: '#2f5a54',
                fontSize: 24,
                fontWeight:500
            },
            padding: 0,
            top:0,
            left:0,
        },
        tooltip: {
            trigger: 'axis'
        },
        grid:{
                left:0,
                right:0,
                bottom:0,
                containLabel: true},
        legend:{
          show: true,
          //data，就是取得每个series里面的name属性。
          orient: 'horizontal',
          padding: 0,
          top: 5,
          right: 40,
          icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
          textStyle: {
              color: "#333"
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap:40, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        },
        xAxis: [{
            type: 'category',
            data: gradeList,
            axisLabel:{
              margin:20,
              textStyle:{
                fontSize:14,
                color:'#C1CECB'
              }
            },
            axisLine: {
                  show: false, //显示X轴
            },
            axisTick: {
                show: false, //不显示小的刻度线
            },
            splitLine: {
                show: false, //不显示横向分割线
            }
        }],
        yAxis: [{
            type: 'value',
            splitNumber:5,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#333"
                },
            },
            axisLabel:{
              margin:22,
              textStyle:{
                fontSize:18,
                color:'#C1CECB'
              }
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        }],
        series: [
          {
            name: '女生',
            type: 'line',
            symbol:'none',
            data: womanList,
            lineStyle: {
                normal: {
                    width:6,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#FFFFFF' // 0% 处的颜色
                        }, {
                            offset: .25,
                            color: '#AD4DBD' // 100% 处的颜色
                        }, {
                            offset: .5,
                            color: '#9C45E2' // 100% 处的颜色
                        }, {
                            offset: .75,
                            color: '#E844B6' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: '#FFFFFF' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#A9F387"
                }
            },
            smooth: true
        },
        {
            name: '男生',
            type: 'line',
            symbol:'none',
            data: manList,
            lineStyle: {
                normal: {
                    width:6,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#FFFFFF' // 0% 处的颜色
                        }, {
                            offset: .25,
                            color: '#4DBDAE' // 100% 处的颜色
                        }, {
                            offset: .5,
                            color: '#4595E2' // 100% 处的颜色
                        }, {
                            offset: .75,
                            color: '#4490E8' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: '#FFFFFF' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#A9F387"
                }
            },
            smooth: true
        }]
    };
      this.actFrequencyChart.setOption(option);
    },
  },
};
</script>


<style scoped lang="scss">
.heal-guidance-program {
  padding: 20px;
  background: #dbf3ed;
  height: 100%;

  > div {
    width: 1513px;
  }
  .my-program {
    .cons-item {
      margin-bottom: 36px;
      display: flex;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      height: 402px;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width: max-content;
      .main-item {
        min-width: 323px;
        width: 323px;
        min-height: 414px;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response {
        max-width: 916px;
        overflow-y: hidden;
        .sub-items {
          display: inline-flex;
        }
      }
      .sub-items {
        display: flex;
        padding: 27px;
        padding-left: 0px;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 12px;
          }
          .childrens {
            display: flex;
            align-items: center;
            .child-item {
              min-width: 283px;
              margin-right: 20px;
            }
            .child-item:last-child {
              margin-right: 0px;
            }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              background-image: url("../../../assets/img/motion_icon.png");
              background-repeat: no-repeat;
              background-size: 56px 56px;
              background-position: 10%;
              display: flex;
              align-items: center;
              .str-box {
                margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height: 30px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height: 30px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child {
          margin-right: 0px;
        }
      }
    }
  }
  .other-panel {
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    .today-targets {
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .main-item {
          width: 350px;
          height: 116px;
          background: #edfdf9;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 23px 29px;
          display: flex;
          align-items: center;
          .act-con {
            margin-left: 27px;
            span {
              display: block;
              font-size: 18px;
              color: #2f5a54;
            }
            .name {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
        .item {
          width: 350px;
          height: 116px;
          border-radius: 20px;
          margin-left: 36px;
          color: #fff;
          cursor: pointer;
          transition:.2s all linear;
          &:hover{
              background:#e0f7f3;
          }
          .top-desc {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            margin-left: 80px;
            margin-right: 10px;
          }
          .progress-bar {
            position: relative;
            height: 10px;
            border-radius: 6px;
            width: calc(100% - 150px);
            margin-left: 80px;
            margin-right: 10px;
            margin-top: 15px;
            .bar {
              position: absolute;
              left: 0px;
              top: 0px;
              height: 100%;
              border-radius: 6px;
              background: #fff;
              transition: 0.2s all linear;
            }
            .val {
              position: absolute;
              right: -50px;
              top: -3px;
            }
          }
          .progress-bar1 {
            background: #6e4109;
          }
          .progress-bar2 {
            background: #5d8fd5;
          }
          .progress-bar3 {
            background: #16413c;
          }
        }
        .item:first-child {
          margin-left: 0px;
        }
        .sub-item1 {
          background-color: #f3af5c;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/acttimeline.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item2 {
          background-color: #659eed;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actnum.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item3 {
          background-color: #4dbdae;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actqd.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
      }
    }
    .current-period {
      .row {
        .main-item {
          width: 740px;
          .act-con {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .status,
            .distince {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
      }
    }
  }
  .dob-chart-box {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    > div {
      width: 740px;
      height: 414px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      padding: 36px 30px;
    }
    .right {
      margin-left: 30px;
      .chart-tabs {
        color: #2f5a54;
        font-size: 24px;
        font-weight: 500;
        span {
          cursor: pointer;
          margin-right: 31px;
          position: relative;
        }
        .active {
          color: #4dbdae;
          &:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 100%;
            height: 4px;
            background: #4dbdae;
            border-radius: 1px;
          }
        }
      }
    }
  }
  .sign-in-records {
    width: 1512px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    padding: 0px 29px;
    padding-bottom: 30px;
    .tit {
      font-size: 24px;
      font-weight: 500;
      color: #2f5a54;
      margin-top: 48px;
      display: inline-block;
    }
    .types {
      margin-top: 26px;
      display: flex;
      span {
        font-size: 14px;
        color: #2f5a54;
        position: relative;
        margin-right: 44px;
        padding-left: 35px;
        cursor: pointer;
      }

      .no-sign:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .exceed:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
    .sign-calendars {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 30px;
    }
    .calendar-item {
      margin-right: 30px;
      .tit {
        margin-left: 10px;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table tr th {
        font-size: 12px;
        color: #a8b4b1;
        width: 54px;
        text-align: center;
      }
      table tr {
        line-height: 50px;
        td {
          padding: 0px 10px;
          text-align: center;
          width: 54px;
        }
      }
      table tr td a {
        color: #000000;
        font-size: 16px;
        position: relative;
        display: inline-block;
        text-align: center;
        width: 100%;
      }
      .other-day {
        color: #a8b4b1;
      }
      .cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .no-sign-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .exceed-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
  }
  .single-chart-box {
    padding: 31px 29px;
    width: 1512px;
    min-height: 405px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    .tit{
          font-size: 24px;
    color: #2f5a54;
    font-weight: 500;
    }
  }
  .bot-chart-box {
    margin-top: 30px;
    display: flex;
    > div {
      width: 740px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
    }
    > div:first-child {
      padding: 31px 30px;
    }
    > div:last-child {
      margin-left: 30px;
    }
    .right {
      padding: 36px 30px;
      .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 54px;
        .tit-text {
          font-size: 24px;
          color: #2f5a54;
          font-weight: 500;
        }
        .sort-box {
          a {
            line-height: 36px;
            width: 80px;
            text-align: center;
            border-radius: 8px;
            display: inline-block;
            cursor: pointer;
            background: #edfdf9;
            font-size: 16px;
            color: #2f5a54;
            box-shadow: -2px -2px 8px 0px rgba(241, 252, 249, 1),
              2px 2px 8px 0px rgba(201, 231, 225, 1) inset;
          }
          a:first-child {
            margin-right: 10px;
          }
          .active {
            background: #4dbdae;
            color: #fff;
            box-shadow: none;
          }
        }
      }
      .rank-list {
        .item {
          color: #2f5a54;
          line-height: 55px;
          .rank-num {
            font-weight: 500;
            font-size: 24px;
            margin-right: 30px;
            .unit {
              font-style: normal;
              font-size: 16px;
              font-weight: normal;
            }
          }
          .class-name {
            font-size: 16px;
          }
          .time {
            float: right;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>